<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false">
  <h3 class="modal-title">添加NFS</h3>
  <div class="modal-body modal-height">
    <form clrForm #itemForm='ngForm'>
      <clr-input-container>
        <label>名称:</label>
        <input clrInput size=45 maxlength="15" type="text" pattern="{{name_pattern}}" [(ngModel)]="item.name"
               name="name" required>
        <clr-control-helper>{{name_pattern_tip}}</clr-control-helper>
        <clr-control-error>{{name_pattern_tip}}</clr-control-error>
      </clr-input-container>

      <clr-radio-container clrInline>
        <clr-radio-wrapper>
          <input type="radio" clrRadio name="options" required value="new" [(ngModel)]="item.vars['option']"/>
          <label>新建 NFS</label>
        </clr-radio-wrapper>
        <clr-radio-wrapper>
          <input type="radio" clrRadio name="options" required value="exists" [(ngModel)]="item.vars['option']"/>
          <label>录入 NFS</label>
        </clr-radio-wrapper>
      </clr-radio-container>

      <div *ngIf="item.vars['option'] == 'exists'">
        <clr-input-container>
          <label>白名单 :</label>
          <input clrInput size=45 type="text" [(ngModel)]="item.vars['allow_ip']" name="allow_ip" required>
          <clr-control-helper>允许此 NFS 访问的 CIDR， 默认所有主机可以访问</clr-control-helper>
        </clr-input-container>

        <clr-input-container>
          <label>服务地址 :</label>
          <input clrInput size=45 type="text" [(ngModel)]="item.vars['storage_nfs_server']" name="server" required>
        </clr-input-container>

        <clr-select-container>
          <label>版本 :</label>
          <select clrSelect [(ngModel)]="item.vars['storage_nfs_server_version']" name="version" required>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </clr-select-container>

        <clr-input-container>
          <label>挂载路径 :</label>
          <input clrInput size=45 type="text" [(ngModel)]="item.vars['storage_nfs_server_path']" name="path" required>
        </clr-input-container>
      </div>
      <div *ngIf="item.vars['option'] === 'new'">
        <clr-select-container>
          <label>主机</label>
          <select clrSelect name="option" [(ngModel)]="item.vars['host']">
            <option value="">请选择</option>
            <option *ngFor="let host of hosts" [value]="host.name">{{host.name}}:{{host.ip}}</option>
          </select>
        </clr-select-container>

        <clr-input-container>
          <label>白名单 :</label>
          <input clrInput size=45 type="text" [(ngModel)]="item.vars['allow_ip']" name="allow_ip" required>
          <clr-control-helper>允许此 NFS 访问的 CIDR， 默认所有主机可以访问</clr-control-helper>
        </clr-input-container>

        <clr-input-container>
          <label>挂载路径 :</label>
          <input clrInput size=45 type="text" [(ngModel)]="item.vars['storage_nfs_server_path']" name="path" required>
        </clr-input-container>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()" [disabled]="isSubmitGoing">取消</button>
        <button type="submit" class="btn btn-primary" (click)="onSubmit()"
                [disabled]="isSubmitGoing || itemForm.invalid">
          <i *ngIf="isSubmitGoing " class="fa fa-spinner fa-pulse"></i>提交
        </button>
      </div>
    </form>
  </div>
</clr-modal>
